<template>
    <div class="main">
        <img style="width: 750rpx;" mode="widthFix" src="../../../static/buy/bookBuy.jpg" alt="">
        <div v-if="show" class="word">
            <div class="logo">
                <img src="../../../static/index/banner.jpg" alt="">
            </div>
            <p class="permisson">申请获取以下权限</p>
            <p class="text">获得你的公开信息(昵称，头像等)</p>
            <button type="primary" open-type="getUserInfo" @getuserinfo="bindGetUserInfo">授权登录</button>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            show: true
        }
    },
    mounted() {
        this.getSetting()
    },

    methods: {
        bindGetUserInfo(e) {
            wx.setStorageSync('userInfo', e.target.userInfo)
        },
        getSetting() {
            var _this = this
            wx.getSetting({
                success: function(e) {
                    if (e.authSetting['scope.userInfo']) {
                        console.log('已经授权了')
                        _this.login()
                    } else {
                        console.log('请授权')
                    }
                }
            })
        },
        login() {
            var _this = this
            wx.login({
                success: function(res) {
                    var code = res.code
                    _this.$http
                        .get('/customer/wx/loginCode', { code: code })
                        .then(res => {
                            console.log(res)
                            wx.setStorageSync('headerUserToken', res.data)
                            wx.switchTab({
                                url: '../index/main'
                            })
                        })
                }
            })
        }
    }
}
</script>
<style lang='scss' scoped>
.main {
    height: 100vh;
    width: 100vw;
}
.logo {
    padding-top: 30rpx;
    padding-bottom: 30rpx;
    img {
        width: 200rpx;
        height: 200rpx;
        border-radius: 50%;
        display: block;
        margin: 0 auto;
    }
}
.word {
    padding: 10px;
    position: fixed;
    top: 40%;
    left: 50%;
    width: 80%;
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
    border-radius: 10rpx;
    background-color: #fff;
    .permisson {
        margin-top: 40rpx;
    }
    .text {
        display: block;
        color: #9d9d9d;
        margin-top: 20rpx;
        font-size: 12px;
        margin-bottom: 40rpx;
    }
}
</style>
